<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1.让网页背景变黑 */
        * {
            margin: 0px;
            padding: 0px;
        }

        html,
        body {
            height: 100%;
            background: #000;
        }

        .fu {
            width: 300px;
            height: 50px;
            position: absolute;
            border: solid 2px pink;
        }

        .blood {
            height: 50px;
            background: red;
        }
    </style>
</head>

<body>
    <div class="fu">
        <div class='blood'></div>
    </div>
    <button style=" position: absolute; right: 0;">开始</button>
</body>
666

</html>
<script>
    document.querySelector('button').onclick = function () {
        var kk = 300
        var bolld = document.querySelector('.blood')
        setInterval(function () {
            kk -= 10
            bolld.style.width = kk + 'px'
        }, 500)
        setInterval(function () {
            // 1.给网页绑定事件
            // 2.给事件处理函数中
            // 1.1创建img标签
            var imgObj = document.createElement('img')
            // 1.2修改src属性
            imgObj.src = './star.gif'
            // 1.3改样式：width 仅img标签默认就有这个属性
            var width = Math.floor(Math.random() * (100 - 20 + 1) + 20)
            imgObj.width = width
            // 1.4改样式：定位
            imgObj.style.position = 'absolute'
            // 1.5改样式：left/top随机
            var maxW = window.innerWidth || document.documentElement.clientWidth
            var maxH = window.innerHeight || document.documentElement.clientHeight
            imgObj.style.left = Math.floor(Math.random() * (maxW - 0 + 1) + 0) - imgObj.width + 'px'
            imgObj.style.top = Math.floor(Math.random() * (maxH - 0 + 1) + 0) - imgObj.width + 'px'
            // 1.6body追加
            document.body.appendChild(imgObj)
            imgObj.onclick = function () {
                this.style.display = 'none'
                kk += 20
            }
            if (kk >= 300) {
                kk = 300
            }
        }, 500)
    }
</script>